<template>
  <div class="ratings">
    <cube-scroll :options="scrollOptions">
      <div class="score-wrapper">
        <div class="total-score">
          <div class="score">{{seller.score}}</div>
          <h4 class="title">综合评分</h4>
          <p class="rank">高于周边商家{{seller.rankRate}}%</p>
        </div>
        <div class="line"></div>
        <div class="single-score">
          <div class="service-score">
            <h4 class="title">服务态度</h4>
            <star :size="36" :score="seller.serviceScore"></star>
          </div>
          <div class="food-score">
            <h4 class="title">商品评分</h4>
            <star :size="36" :score="seller.foodScore"></star>
          </div>
          <div class="delivery-time">
            <h4 class="title">送达时间</h4>
            <span class="time">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <split></split>
      <rating-select
        v-if="ratings.length"
        :is-active-num="isActiveNum"
        :only-content="onlyContent"
        :ratings="ratings"
        @select="onSelect"
        @toggle="onToggle"
      ></rating-select>
      <div class="line"></div>
      <rating-list
        v-if="ratings.length"
        :main="true"
        :ratings="ratings"
        :is-active-num="isActiveNum"
        :only-content="onlyContent"
      ></rating-list>
    </cube-scroll>
  </div>
</template>
<script>
import { getRatings } from '../../api/index'
import moment from 'moment'
import Star from '../star/star.vue'
import Split from '../split/split.vue'
import RatingSelect from '../rating-select/rating-select.vue'
import RatingList from '../ratings-list/rating-list.vue'

const ALL = 2

export default {
  name: 'ratings',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isActiveNum: ALL,
      onlyContent: false,
      ratings: [],
      scrollOptions: {
        click: false, // 不设置为false会点击俩次，底层用的是better-scroll，所以设置click为false
        directionLockThreshold: 0 // 当我们需要锁定只滚动一个方向的时候，我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差，当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。
      }
    }
  },
  computed: {
    seller() {
      return this.data.seller
    }
  },
  methods: {
    fetch() {
      if (!this.fetched) {
        this.fetched = true
        getRatings({
          id: this.seller.id
        }).then((ratings) => {
          this.ratings = ratings
        })
      }
    },
    onSelect(index) {
      this.isActiveNum = index
    },
    onToggle() {
      this.onlyContent = !this.onlyContent
    },
    format(date) {
      return moment(date).format('YYYY-MM-DD hh:mm')
    }
  },
  components: {
    Star,
    Split,
    RatingSelect,
    RatingList
  }
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

.ratings
  position relative
  width 100%
  height 100%
  .cube-scroll-wrapper
    position absolute
    top 0
    bottom 0
    width 100%
    .score-wrapper
      display flex
      margin 18px 0
      .total-score
        width 138px
        text-align center
        .score
          line-height 28px
          font-size $fontsize-large-xxx
          color $color-orange
          margin-bottom 6px
        .title
          line-height 14px
          font-size $fontsize-medium
          color $color-text
          margin-bottom 8px
        .rank
          line-height 10px
          font-size $fontsize-small-s
          color $color-text-ss
      .single-score
        flex 1
        padding 0 24px
        .service-score
          display flex
          align-items center
          margin-bottom 8px
          .title
            line-height 18px
            margin-right 12px
            font-size $fontsize-medium
            color $color-text
        .food-score
          display flex
          align-items center
          margin-bottom 8px
          .title
            line-height 18px
            margin-right 12px
            font-size $fontsize-medium
            color $color-text
        .delivery-time
          display flex
          align-items center
          .title
            line-height 18px
            margin-right 12px
            font-size $fontsize-medium
            color $color-text
          .time
            line-height 18px
            margin-right 12px
            font-size $fontsize-medium
            color $color-text-ss
    .rating-select
      padding 0 18px
      margin-bottom 12px
    .rating-list-wrapper
      padding 18px
.line
  border-1px($color = $color-row-line)
</style>
